<script lang="ts">
export const installProcessPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./InstallProcess.vue')),
  {
    title: toRef(() => $t('c7Fv2L9yguE3tHBgc4cR')),
    wrapClassName: 'ant-cover__Modal-drawer ant-cover__Modal-install-app __screen-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="ts">
const typeList = computed(() => [
  {
    value: 'mobile',
    label: 'Android/IOS',
  },
  {
    value: 'desktop',
    label: 'Window/MacOS',
  },
]);
const type = ref(envs.isMobile ? 'mobile' : 'desktop');
</script>

<template>
  <div class="text-sm text-sys-text-body">
    <div class="mb-3 flex items-center">
      <ASegmented
        v-model:value="type"
        class="w-full text-base"
        block :options="typeList"
      />
    </div>

    <div v-if="type === 'desktop'" class="text-center text-sys-text-body">
      <div>
        <div class="flex-center gap-2 py-4 text-sys-text-head">
          <i class="i-local:window?mask text-5" />
          <span class="text-5.5 font-900">Windows / MacOS</span>
          <i class="i-local:ios-icon?mask text-5" />
        </div>

        <div class="text-4 text-sys-text-head">
          <p>Google Chrome</p>
          <img src="../imgs/desktop.png" class="mt-2.5 h-27.5">
        </div>
        <div class="grid gap-4 text-left text-4">
          <div class="flex gap-3">
            <i class="icon i-local:install--w-1 block" /> {{ $t('bBiTmn7SombdbCbEpwy1D') }}
          </div>
          <div class="flex gap-3">
            <i class="icon i-local:install--w-2 block" /> {{ $t('jWfVv0pxYaFOlF809VmCb') }}
          </div>
        </div>

        <div class="mt-7.5 text-4 text-sys-text-head">
          <p>Safari Browser</p>
          <img src="../imgs/desktop.png" class="mt-2.5 h-27.5">
        </div>
        <div class="grid gap-4 text-left text-4">
          <div class="flex gap-3">
            <i class="icon i-local:install--w-3 block" />{{ $t('sm8AubX7oF07sjKb8AlKx') }}
          </div>
          <div class="flex gap-3">
            <i class="icon i-local:install--w-4 block" /> {{ $t('8fIkOrp87vVenRmkk6vA5') }}
          </div>
        </div>
      </div>
    </div>

    <div v-if="type === 'mobile'" class="grid gap-7.5 text-center text-4 text-sys-text-body">
      <div class="grid gap-4">
        <div class="text-sys-text-head">
          <div class="flex-center gap-2">
            <span class="text-5.5 font-900">Android</span>
            <i class="i-local:android?mask text-5" />
          </div>
          <p class="mt-2.5 font-500">
            Google Chrome
          </p>
          <img src="../imgs/android-1.png" class="mt-2.5 h-27.5">
        </div>

        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--m-1 block" /> {{ $t('d899lkkkuaskdZ4BaNspC') }}
        </div>
        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--m-2 block" /> {{ $t('xnvv3HIdi5pPNh75tyruI') }}
        </div>
      </div>

      <div class="grid gap-4">
        <div class="text-sys-text-head">
          <div class="flex-center gap-2">
            <span class="text-5.5 font-900">ios</span>
            <i class="i-local:ios-icon?mask text-5" />
          </div>
          <p class="mt-2.5 font-500">
            Google Chrome
          </p>
          <img src="../imgs/ios-2.png" class="mt-2.5 h-27.5">
        </div>

        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--w-3 block" />{{ $t('6WsK8XNegpeA1ZokP7em') }}
        </div>
        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--m-3 block" /> {{ $t('l8Yo8gf9OCaNda7fknh7K') }}
        </div>
      </div>

      <div class="grid gap-4">
        <div class="text-sys-text-head">
          <p class="font-500">
            Safari Browser
          </p>
          <img src="../imgs/ios-3.png" class="mt-2.5 h-27.5">
        </div>

        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--w-3 block" />{{ $t('uW3KxrYiMxIvdHDPjj8') }}
        </div>
        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--m-3 block" /> {{ $t('raMpZmaHj1TjeUKoSc1Au') }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:global(.ant-cover__Modal-install-app .ant-modal-content) {
  background: radial-gradient(69.61% 36.39% at 50% 0%, rgba(132, 138, 157, 0.5) 0%, rgba(38, 39, 46, 0) 100%);
}
</style>
